{% extends '../common/base.html' %} {% block body %}




<div class="mt10 ml10 fb bl3 f14 pl10 tl pr10">
    <h3>{{project.system_name}}<small class="ml10">基础路径：{{project.system_url}}</small></h3>
</div>
<hr>

<div class="row">
    <div class="alert alert-info ml15" style="width:97%">
        备注:请认真填写相关参数，此项目名为：
        <span class="alert-link">{{project.system_name}}</span>，因此只能添加此项目下的相关接口
    </div>
    <div class="col-md-3">
        <div class="alert alert-success" role="alert">
            接口目录
        </div>
        {% if (result.length)%}
        <el-menu
        unique-opened="true"
        style="height:1000px;"
      >
        {% for item in result %}
        <el-submenu  index="'{{item.group_id}}''">
          <template slot="title">
            <!--<i class="el-icon-location"></i>-->
            <span>{{item.group_name}}</span>
          </template>
          {% for child in item.children %}
          <el-menu-item @click="clickMethods('{{child.api_id}}','{{item.group_name}}')" index="'{{child.api_id}}'">{{child.api_name}}</el-menu-item>
          {% endfor %}
        </el-submenu>
        {% endfor %}
       </el-menu>
        
        {% else %}

        <div class="alert alert-info" style="width:100%">
            还没有创建相关接口项目！请从右侧添加
        </div>

        {% endif %}
    </div>
    <div class="col-md-9">
        <div class="alert alert-success" role="alert">
            请添加该项目下的接口分类,
            <a href="javascript:;" class="alert-link" @click="addTypeApi">立即添加</a>
        </div>


        <el-form :model="apiForm" :rules="rules" ref="apiForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="接口名称" prop="api_name">
                <el-input v-model="apiForm.api_name" placeholder="接口名称"></el-input>
            </el-form-item>

            <el-form-item label="基础路径" prop="api_path">
                <el-input v-model="apiForm.api_path" placeholder="基础路径如：http://, https://"></el-input>
            </el-form-item>


            <el-form-item label="接口方法" prop="api_method">
                <el-input v-model="apiForm.api_method" placeholder="接口方法"></el-input>
            </el-form-item>

            <el-form-item label="所属接口分类" prop="group_id">
                <el-select v-model="apiForm.group_id" placeholder="请选择活动区域">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="item of groupList" :value="item.group_id" :label="item.group_name" :key="item.group_id">

                    </el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="接口参数">
                <table class="table table-bordered" style="margin-bottom:0">
                    <thead>
                        <tr class="fb">
                            <th class="p5" style="width:30%">
                                字段名称
                            </th>
                            <th class="p5">
                                是否为空
                            </th>
                            <th class="p5">
                                字段说明
                            </th>
                            <th class="p5">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody>

                        <template v-for="(item,index) of paramsList">
                                <tr class="last">
                                    <td>
                                        <input type="text" class="form-control" v-model="item.param_key" placeholder="输入字段名称">
                                    </td>
                                    <td class="pl10">
                                        <select class="form-control" id="method" v-model="item.param_null">
                                            <option value="是">是</option>
                                            <option value="否">否</option>
                                        </select>
                                    </td>
                                    <td class="pl10">
                                        <input type="text" class="form-control" v-model="item.param_desc" placeholder="输入字段描述">
                                    </td>
                                    <td class="pl10">
                                        <a href="javascript:;">
                                            <i class="glyphicon glyphicon-trash" @click="deleteApiParams(index,item)"></i>
                                        </a>
                                    </td>
                                </tr>
                            </template>
                    </tbody>
                </table>

                <el-button type="success" size="mini" @click="addApiParams">添加参数</el-button>

            </el-form-item>


            <el-form-item label="接口介绍" prop="api_desc">
                <el-input type="textarea" v-model="apiForm.api_desc" placeholder="接口相关描述"></el-input>
            </el-form-item>


            <el-form-item>

                <template v-if="!apiForm.api_id">
                <el-button  type="primary" @click="submitMethods('apiForm')">提交</el-button>
                <el-button @click="resetForm('apiForm')">重置</el-button>
            </template>
                <template v-else>
                            <el-button v-if="apiForm.api_id"  @click="updateMethods">修改</el-button>
                            <el-button v-if="apiForm.api_id"  @click="deleteMethods">删除</el-button>
                        </template>


            </el-form-item>
        </el-form>
    </div>
</div>

<el-dialog title="添加分类" :visible.sync="dialogTableVisible">
    <el-form :model="groupForm" :rules="rulesGroup" ref="groupForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="group_name">
            <el-input v-model="groupForm.group_name"></el-input>
        </el-form-item>
    </el-form>
    <h5>分类列表</h5>
    <div class="group-list">
        <div class="alert alert-info" v-for="(item,index) of groupList" :key="item.group_id" style="margin-bottom:5px">
            <button type="button" class="close" @click="deleteGroupItem(item.group_id,index)">
                    <span aria-hidden="true">&times;</span>
                </button>
            <strong>${item.group_name}</strong>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" @click="dialogTableVisible=false">取消</button>
        <button type="button" class="btn btn-primary" @click="submitGroupMethods('groupForm')">保存</button>
    </div>
</el-dialog>





<br>
<br> {% endblock %} {% block script %}
<script>
    new Vue({
        el: '#container',
        delimiters: ['${', '}'],
        data() {
            return {
                details: {},
                dialogTableVisible: false,
                error: '',
                apiForm: {
                    api_id: '',
                    api_path: '',
                    api_params: '',
                    api_name: '',
                    api_method: '',
                    api_desc: '',
                    group_id: '',
                },
                rules: {
                    api_name: [{ required: true, message: '接口名称不能空', trigger: 'blur' }],
                    api_path: [{ required: true, message: '接口基础路径不能空', trigger: 'blur' }],
                    api_method: [{ required: true, message: '接口方法不能空', trigger: 'blur' }],
                    group_id: [{ required: true, message: '接口分类不能空', trigger: 'blur' }],

                },
                groupForm: {
                    group_name: ''
                },
                rulesGroup: {
                    group_name: [{ required: true, message: '分类名称不能空', trigger: 'blur' }],
                },
                groupList: [],
                paramsList: [{
                    id: Math.random().toString(16).substr(2),
                    param_key: '',
                    param_dec: '',
                    param_null: '是',
                    param_value: ''
                }],
               

            }
        },
        mounted() {
            this.findGroupList();
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            clickMethods(id) {
                $.get(`/admin/showApi?api_id=${id}`).then((res) => {
                    if (res.success) {
                        this.apiForm.api_id = res.result.api_id;
                        this.apiForm.api_path = res.result.api_path;
                        this.paramsList = JSON.parse(res.result.api_params);
                        this.apiForm.api_name = res.result.api_name;
                        this.apiForm.api_method = res.result.api_method;
                        this.apiForm.api_desc = res.result.api_desc;
                        this.apiForm.group_id = res.result.group_id + '';
                    }
                }).catch(function(error) {
                    console.log(error);
                });
            },
            findGroupList() {
                $.get(`/admin/group?system_id=${sessionStorage.getItem('group')}`).then((json) => {
                    if (json.success) {
                        this.groupList = json.result;
                    }
                }).catch(function(error) {
                    console.log(error);
                });
            },
            //添加接口
            submitMethods(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = this.commonParams();
                        $.ajax({
                            url: `/admin/addApi`,
                            type: "POST",
                            data: params,
                            dataType: "json",
                        }).then((res) => {
                            if (res.success) {
                                location.reload();
                            }
                        })
                    }
                })
            },
            commonParams() {
                let arrParams = [];
                for (let item of this.paramsList) {
                    if (item.param_key !== '' && /^[a-z]/.test(item.param_key)) {
                        arrParams.push(item);
                    }
                }
                return {
                    system_id: sessionStorage.getItem('group'),
                    api_path: this.apiForm.api_path,
                    api_params: JSON.stringify(arrParams),
                    api_name: this.apiForm.api_name,
                    api_method: this.apiForm.api_method,
                    api_desc: this.apiForm.api_desc,
                    group_id: this.apiForm.group_id,
                }
            },
            //修改接口
            updateMethods() {
                let params = this.commonParams();
                params.api_id = this.apiForm.api_id,
                    $.ajax({
                        url: `/admin/updateApi`,
                        type: "POST",
                        data: params,
                        dataType: "json",
                    }).then((res) => {
                        if (res.success) {
                            location.reload();
                        }
                    })
            },
            //删除接口
            deleteMethods() {
                this.$confirm('确定删除该接口?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    $.get(`/admin/deleteApi?api_id=${this.apiForm.api_id}`).then((res) => {
                        if (res.success) {
                            location.reload();
                        }
                    }).catch(function(error) {
                        console.log(error);
                    });
                }).catch(err => {

                })
            },
            //添加参数
            addApiParams() {
                this.paramsList.push({
                    param_key: '',
                    param_dec: '',
                    param_null: '是',
                    param_value: ''
                })
            },
            //删除参数
            deleteApiParams(index, item) {
                console.log(index)
                this.paramsList.splice(index, 1)
            },
            addTypeApi() {
                this.system_id = '';
                this.groupForm.group_name = '';
                this.dialogTableVisible = true;
            },
            submitGroupMethods(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post('/admin/addGroup', {
                            system_id: sessionStorage.getItem('group'),
                            group_name: this.groupForm.group_name
                        }).then((res) => {
                            if (res.success) {
                                this.dialogTableVisible = false;
                                this.findGroupList();
                            }
                        })
                    }
                })
            },
            //删除
            deleteGroupItem(id, index) {
                this.$confirm('确定删除该接口分组?删除后，该下面的接口将不再显示，谨慎操作！！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    $.get('/admin/deleteGroup?group_id=' + id).then((res) => {
                        if (res.success) {
                            this.groupList.splice(index, 1)
                        }
                    })
                }).catch(err => {

                })
            }
        }
    })
</script>


{% endblock %}